<template>
  <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules" label-width="auto"
    class="demo-ruleForm">
    <!-- 输入手机号 -->
    <el-form-item label="手机号" prop="phone">
      <el-input v-model.number="ruleForm.phone" />
    </el-form-item>
    <el-form-item label="密码" prop="pwd">
      <el-input v-model="ruleForm.pwd" type="password" autocomplete="off" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        登录
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">

import router from '../router/index'
// 引入vue的响应式数据引用
import { reactive, ref } from 'vue'
// 引入Element Plus的表单校验组件
import type { FormInstance, FormRules } from 'element-plus'
// 引入Element Plus的消息框
import { ElMessage } from 'element-plus'
// 引入api中的函数
import { loginApi } from '../api/api';
// 这个ref对象的.value属性指向你传入的参数值。
// 当.value被修改时，所有依赖这个ref的地方都会自动更新。
const ruleFormRef = ref<FormInstance>()
// 检查手机号是否合法
const checkPhone = (rule: any, value: any, callback: any) => {
  var regexp = /^1[3-9]\d{9}$/
  if (!value) {
    return callback(new Error('手机号不能为空'));
  }
  else if (!regexp.test(value)) {
    return callback(new Error('手机号格式不正确'));
  } else {
    callback();
  }
}
const validatePass = (rule: any, value: any, callback: any) => {
  const regex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*_)[a-zA-Z\d_]{8,16}$/
  if (!value) {
    callback(new Error('密码不能为空'))
  } else if (!regex.test(value)) {
    callback(new Error('密码格式不正确'))
  } else {
    callback()
  }
}
// vm: 数据绑定的位置
const ruleForm = reactive({
  phone: '15281802937',
  pwd: 'Aa12345_',
})
// 给表单元素绑定校验规则,并设定校验触发机制条件
const rules = reactive<FormRules<typeof ruleForm>>({
  pwd: [{ validator: validatePass, trigger: 'blur' }],
  phone: [{ validator: checkPhone, trigger: 'blur' }],
})
// 声明一个登录函数
// 使用 async/await 可以使异步代码看起来和同步代码一样，这有助于提升代码的可读性和可维护性
async function handleLogin() {
  try {
    const response = await loginApi(ruleForm);
    // 测试
    console.log(response.data); // 访问 data
    console.log(response.code); // 访问 code


    // 当后端返回200表示登录成功
    if (response.code === 200) {
      ElMessage({
        message: '登录成功',
        type: 'success',
        plain: true,
        duration: 1000
        
      })
      console.log(111)
      setTimeout(() => {
        localStorage.setItem('sysuser', JSON.stringify(response.data));
        console.log(response.data)
        router.push('/index')
        console.log('jjjjj')
      }, 1000)
      console.log(111)
    } else {
      // 非200时, 提示出后端返回的业务异常信息, 例如: 用户名或密码不正确
      ElMessage({
        message: response.msg,
        type: 'error',
        plain: true,
        duration: 1500
      })
    }
  } catch (error) {
    // 当出现前端异常时, 也应该给出合理提示
    ElMessage({
      message: '登录失败:' + error,
      type: 'error',
      plain: true,
      duration: 1500
    })
  }
}
// 提交表单的触发函数
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    // 执行数据校验
    if (valid) {
      // 校验通过,打印表达中的字段信息
      // console.log(ruleForm)
      // 调用函数, 执行axios
      handleLogin();
    } else {
      console.log('数据格式有误')
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scoped></style>